<template>
  <div class="search-box">
    <!-- 选择标签 -->
    <el-space direction="vertical">
      <el-checkbox-group v-model="checkedTagIDs" size="default">
        <el-checkbox v-for="item in useTag.tags" :key="item.tag_id" :label="item.tag_id" border>{{ item.name }}({{ item.count }})</el-checkbox>
      </el-checkbox-group>
    </el-space>
  </div>
  <div class="btn-list">
    <el-input v-model="msg" placeholder="消息内容不少于 6 个字" :rows="5" type="textarea" />
  </div>
  <!-- 发送按钮 -->
  <div class="btn-list">
    <el-button :disabled="msg.length < 6 || checkedTagIDs.length == 0" type="primary" size="default" @click="sendMsg">发 送</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { broadByTag, ITag } from './api'
import { useTagStore } from './store'

const checkedTagIDs = ref<number[]>([])
const msg = ref('')
const useTag = useTagStore()

// 读取所有便签
useTag.getAllTags()

// 发送消息
const sendMsg = async () => {
  let sended = 0
  await checkedTagIDs.value.forEach(id => {
    broadByTag(id, msg.value).then(() => {
      sended++
      // 全部发送完成
      if (sended == checkedTagIDs.value.length) {
        checkedTagIDs.value.length = 0
        msg.value = ''
      }
    })
  })
}
</script>

<style scoped></style>
